<template>
	<!--  table再组件化-->
	<!-- 通过v-bind="$attrs" v-on="$listeners"，把父组件传的属性全部绑定到子组件上，保证了api和el-table一致 -->
	<el-table style="width: 100%" v-bind="$attrs" ref="commonTable" @sort-change="changeSort" :row-style="rowStyle" :row-class-name="rowClassName" :row-key="tableSet.idColum" :height="tableHeight" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" v-on="$listeners" @row-click="rowClick" border>
		<!-- 多选框   -->
		<el-table-column v-if="tableSet.selection" type="selection" width="55"></el-table-column>
		<!-- 显示索引 -->
		<el-table-column v-if="tableSet.showKey" type="index" width="50"> </el-table-column>
		<!-- 主键列隐藏 -->
		<el-table-column :prop="tableSet.idColum" label="" v-if="false" />

		<!-- :scope是绑定的动态属性，可以起任意喜欢的名字，但要注意在父组件中获取数据时key要对应 -->
		<el-table-column v-for="(item, index) in columns" :key="index" v-bind="item.attrs" :sortable="item.sortable">
			<!-- <el-table-column type="selection" v-if="item.type==='selection'" width="55" /> -->
			<template slot-scope="scope">
				<slot :scope="scope" :name="item.slot" :buttens="item.buttens" v-if="item.slot"></slot>
				<template v-else>
					<span>{{ item.formatter ? item.formatter( scope.row[item.attrs.prop]) : scope.row[item.attrs.prop] }}</span>
					<!-- {{ scope.row[item.attrs.prop]}} -->
				</template>
			</template>
		</el-table-column>
	</el-table>
</template>

<script>
export default {
	props: {
		columns: {
			type: Array,
			default: () => [],
		},
		//配置表格table风格等等
		tableSet: {
			type: Object,
			// eslint-disable-next-line vue/require-valid-default-prop
			default: {},
		},
		rows: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			tableHeight: 300,
      windowHeight:0,
		}
	},
  
 created() {
   
 },
	mounted: function () {
    this.windowHeight=window.outerHeight//设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）
    //必须使用 this.$nextTick回调 否则无法渲染成功
    this.$nextTick(function () {
        this.tableHeight = this.windowHeight - this.$refs.commonTable.$el.getBoundingClientRect().top - 96-100 ;
         //  this.$refs.commonTable.$el.getBoundingClientRect().top获取元素相对于窗口顶部的高度
    //第一个 96是 分页所占高度 第二个100是窗口导航页和面包屑所占高度
    	//window.innerHeight:浏览器的可用高度
		//this.$refs.table.$el.offsetTop：表格距离浏览器的高度
		//后面的50：根据需求空出的高度，自行调整
  })
	},
	methods: {
		rowStyle({ row, rowIndex }) {
			Object.defineProperty(row, "rowIndex", {
				//给每一行添加不可枚举属性rowIndex来标识当前行
				value: rowIndex,
				writable: true,
				enumerable: false,
			});
		},
		//监听row-click事件，实现选中
		rowClick(row, column, event) {
			let refsElTable = this.$refs.commonTable; // 获取表格对象
			let findRow = this.rows.find((c) => c.rowIndex == row.rowIndex); //找到选中的行
			if (findRow) {
				refsElTable.toggleRowSelection(row, false); //如过重复选中，则取消选中
				return;
			}
			refsElTable.toggleRowSelection(row, true); // 实现选中行中选中事件
		},
		//实现选中高亮
		rowClassName({ row, rowIndex }) {
			let rowName = "",
				findRow = this.rows.find((c) => c.rowIndex === row.rowIndex);
			if (findRow) {
				rowName = "current-row ";
			}
			return rowName; //也可以再加上其他类名 如果有需求的话
		},
		//监测排序事件
		changeSort(val) {
			this.$emit("changeSortCallBack", val.prop, val.order);
			// this.$parent.changeSortCallBack(val.prop, val.order);
		},
	},
};
</script>

<style scoped>
.el-table {
	margin-top: 10px;
}
</style>